<template>
  <div class="dialog-main">
    <el-dialog
      v-model="dialogVisible"
      title="部门修改"
      width="50%"
      top="10vh"
      :before-close="handleClose"
      :lock-scroll="false"
      :show-close="false"
      draggable
    >
      <el-form
        :model="form"
        label-width="80px"
        label-position="left"
        status-icon
        class="add-form"
        ref="ruleFormRef"
        @submit.native.prevent=""
      >
        <el-form-item label="部门名称" prop="department_name">
          <el-input v-model="form.department_name" />
        </el-form-item>
        <el-form-item v-if="form.parent_id === 0" label="状态" prop="status">
          <el-select v-model="form.is_status" placeholder="请选择">
            <el-option
              v-for="item in roleOptions"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="footer">
          <el-button class="btn button" @click.stop="handleClose">取消</el-button>
          <el-button class="btn" color="#6C52EA" @click.stop="handleSave">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { watch, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { editDepartmentData } from '@/apis/organization/department'
// import { editPageData } from '@/apis/system/department'

const props = defineProps({
  dialog: {
    type: Boolean,
    default: false
  },
  dialogData: {
    type: Object,
    default: () => {}
  },
  menuList: {
    type: Object,
    default: () => {}
  }
})

/**
 * 修改回显
 */
const form = ref()
watch(
  () => [props.dialog, props.dialogData],
  (newVal) => {
    dialogVisible.value = newVal[0]
    form.value = JSON.parse(JSON.stringify(newVal[1]))
  }
)

const roleOptions = ref([
  { label: '正常', value: '正常' },
  { label: '待启用', value: '待启用' },
  { label: '停用', value: '停用' }
])

const emit = defineEmits(['edit-dialog-close', 'dialog-edite-save'])
/**
 * 关闭弹窗
 */
const dialogVisible = ref()
const handleClose = () => {
  emit('edit-dialog-close')
}

/**
 * 保存关闭
 */
const ruleFormRef = ref()
const handleSave = () => {
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      editDepartmentData(form.value)
        .then((res) => {
          if (!res) return
          emit('dialog-edite-save')
          ElMessage.success('修改成功')
        })
        .catch(() => {
          ElMessage('服务器内部错误！')
        })
    }
  })
}
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
  border-radius: 10px;
}
:deep(.el-input) {
  width: 90%;
}
:deep(.el-textarea__inner) {
  width: 90%;
}
.button {
  color: #6C52EA;
}
.button:hover {
  color: #6C52EA;
  border-color: #6C52EA;
  background-color: var(--el-button-hover-bg-color);
  outline: 0;
  opacity:0.8;
}
.dialog-main {
  .add-form {
    height: 280px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 15%;
    padding-bottom: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(220, 223, 230, 1);
  }
  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    padding-top: 10px;
    text-align: right;
    .btn {
      width: 150px;
      height: 48px;
      opacity: 1;
      border-radius: 4px;
      border: 1px solid rgba(220, 223, 230, 1);
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      padding: 15px 61px 15px 61px;
    }
  }
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
